<!--
 * @Author: 可以清心
 * @Description: 
 * @Date: 2023-01-14 13:50:15
 * @LastEditTime: 2023-03-13 19:07:39
-->
<template>
    <van-form @submit="onSubmit" class="form">
        <van-field v-model="username" class="input" name="工号" placeholder="请输入您的工号" :rules="[{ required: true }]">
            <template slot="left-icon">
                <img src="@/assets/account.png" alt="" class="left-icon">
            </template>
        </van-field>
        <van-field v-model="password" :type="type" name="密码" placeholder="请输入密码" :rules="[{ required: true }]">
            <template slot="left-icon">
                <img src="@/assets/password.png" alt="" class="left-icon">
            </template>

            <template slot="right-icon">
                <img src="@/assets/eye.png" alt="" class="right-icon" @touchstart="type = 'text'"
                    @touchend="type = 'password'">
            </template>
        </van-field>
        <div style="margin: 1.6rem;">
            <van-button block native-type="submit" color="#005EBA" :loading="loading" loading-text="登录"
                class="login-button">登录</van-button>
        </div>
        <div class="forget">
            <a :href="hrefLink" class="forget">忘记密码</a>
        </div>
    </van-form>
</template>

<script>
import axios from 'axios'
import encryption from '@/utils/encryption.util'
import storage from '@/utils/storage'
export default {
    name: 'App',
    data() {
        return {
            username: '',
            password: '',
            type: 'password',
            hrefLink: '',
            loading: false
        }
    },
    created() {
        this.hrefLink = this.getForgetPasswordUrl();
    },
    methods: {
        onSubmit() {
            this.loading = true;
            // this.encryptionPassWord();
            this.userCenterLogin();
        },
        /**
         * @description: 获取忘记密码的链接
         * @return {string | void}
         */
        getForgetPasswordUrl() {
            let GLOBAL_ENV = window.GLOBAL_ENV;

            if (GLOBAL_ENV) {
                let customField = GLOBAL_ENV['VUE_APP_CUSTOM_ENV'];

                if (customField) {
                    return customField.forgetUrl || 'http://user-dev.boe.com.cn/static/forgetPassword/index.html';
                }
            }
        },
        /**
         * @description: 获取应用数据 
         * @return {any}
         */
        getApplicationInfo() {
            let GLOBAL_ENV = window.GLOBAL_ENV;

            if (GLOBAL_ENV) {
                return {
                    tenantId: GLOBAL_ENV['VUE_APP_TENANT_ID'],
                    appId: GLOBAL_ENV['VUE_APP_APP_ID'],
                    domain: GLOBAL_ENV['VUE_APP_BASE_DOMAIN'],
                    path: GLOBAL_ENV['VUE_APP_PUBLIC_PATH'],
                }
            }

            return {}
        },
        /**
         * @description: 获取用户中心提供的appId
         * @return {void}
         */
        getUserCenterAppIdAndUrl() {
            let GLOBAL_ENV = window.GLOBAL_ENV;

            if (GLOBAL_ENV) {
                let CUSTOM_ENV = GLOBAL_ENV['VUE_APP_CUSTOM_ENV'];

                if (CUSTOM_ENV) {
                    return {
                        userCenterAppId: CUSTOM_ENV.userCenterAppId,
                        userCenterLoginUrl: CUSTOM_ENV.userCenterLoginUrl
                    };
                }
            }

            return null;
        },
        /**
         * @description: 接入用户中心的登录方式
         * @return {void}
         */
        async userCenterLogin() {
            const { getUserCenterAppIdAndUrl, getApplicationInfo, username, password } = this;

            let encyptionPass = await encryption.passwordEncryption(password);
            let { userCenterAppId, userCenterLoginUrl } = getUserCenterAppIdAndUrl();
            let applicationInfo = getApplicationInfo();

            let domain = applicationInfo.domain || location.host;
            let path = '/m/';

            if (userCenterAppId && userCenterLoginUrl) {
                axios({
                    url: userCenterLoginUrl,
                    method: 'post',
                    data: {
                        password: encyptionPass,
                        userName: username,
                        appId: userCenterAppId
                    }
                }).then((resp) => {
                    const res = resp.data;
                    if (res.code === 'ok') {
                        const {setModule} = storage;
                        const { data } = res;

                        setModule(data);

                        if (location.hostname !== 'localhost') {
                            window.open(domain + path, '_self')
                        }
                    } else {
                        debugger;
                        Toast.fail(res.message);
                        // Toast.fail('登录失败');
                        this.loading = false;
                    }
                }).catch((error) => {
                    debugger;
                    // Toast.fail('您无此应用权限');
                    Toast.fail(error?.response?.data?.message);
                    this.loading = false;
                })
            }else{
                Toast.fail('未配置环境变量接口，请检查环境变量是否配置完整');
                this.loading = false;
            }
        },
        /**
         * @description: 登录接口
         * @return {void}
         * @deprecated 弃用改用用户中心登录接口
         */
        async encryptionPassWord() {
            const { getApplicationInfo, username, password } = this;
            let encyptionPass = await encryption.passwordEncryption(password);
            let applicationInfo = getApplicationInfo();

            let tenantId = applicationInfo.tenantId || '332938032653008897';
            let appId = applicationInfo.appId || '336863401667985408';

            let domain = applicationInfo.domain || location.host;
            let path = '/m/'

            let url = '';

            if (location.hostname !== 'localhost') {
                url = '/xdap-app/app/login'
            } else {
                url = 'http://172.19.11.93:30615/xdap-app/app/login'
            }

            axios({
                url,
                method: 'post',
                data: {
                    type: "account",
                    tenantId,
                    securityCode: '',
                    password: encyptionPass,
                    appId,
                    account: username
                }
            }).then((resp) => {
                this.className = '';
                const res = resp.data;
                if (res.code === 'ok') {
                    const { setModule } = storage;
                    const { data } = res;

                    setModule(data);

                    if (location.hostname !== 'localhost') {
                        window.open(domain + path, '_self')
                    }
                } else {
                    Toast.fail('登录失败');
                    this.loading = false;
                }
            }).catch(() => {
                Toast.fail('您无此应用权限');
                this.loading = false;
            })
        }
    }
}
</script>

<style scoped>
.form {
    box-sizing: border-box;
    width: 100%;
    padding: 0 2rem;
}

.form .login-button {
    border-radius: 1rem;
    padding: 2.5rem 0;
    font-family: PingFangSC-Regular;
    font-size: 2rem;
    color: #FFFFFF;
    font-weight: 400;
}

.form .left-icon,
.form .right-icon {
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
}

.form .right-icon {
    margin-right: 0;
}

.form .forget {
    font-family: PingFangSC-Regular;
    float: right;
    font-size: 2rem;
    color: #ADB5BD;
    letter-spacing: 0;
    line-height: 2.4rem;
    font-weight: 400;
}

.form .forget a {
    display: block;
    width: 100%;
    text-align: right;
    margin: 0 1.6rem;
}
</style>
